import React, { Component } from 'react'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import './App.css'
export default class App extends Component {
  state = {
    students:[
      {
        id:1,
        name:'吃饭',
        check:true
      },
      {
        id:2,
        name:'睡觉',
        check:false
      },
      {
        id:3,
        name:'打代码',
        check:false
      },
    ]
  }
  addStudent=(e)=>{
    const newList = [e,...this.state.students]
    this.setState({students:newList})
  } 
  updateItem = (id,check) => {
    const { students } = this.state
    let temp = students.map(item=>{
      if(item.id===id) return{...item,check}
      else return item
    })
    this.setState({students:temp})
  }
  deleteItem = (id) => {
    const { students } = this.state
    let tem = students.filter(i=>i.id!==id)
    this.setState({students:tem})
  }
  allCheck = (check) => {
    const { students } = this.state
    let tem = students.map((item) => {
      return {...item,check}
    })
    this.setState({students:tem})
  }
  clearComplete = () => {
    const { students } = this.state
    let tem = students.filter(i=>!i.check)
    this.setState({students:tem})
  }
  render() {
    const {students} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header add={this.addStudent}/>
          <List value={students} updateItem={this.updateItem} deleteItem={this.deleteItem} />
          <Footer allCheck={this.allCheck} item={students} clearComplete={this.clearComplete}/>
        </div>
      </div>
    )
  }
}
